<template>
  <v-popup :provideName="provideName" :zIndex="2006" height="80%">
    <CommentList :key="musicId" :comments="musicComments" :hotComments="musicHotComments" v-loadData="getData">
      <template #before>
        <div class="music-info">
          <div class="cover">
            <van-image width="4rem" height="4rem" round :src="musicData.al.picUrl" />
          </div>
          <div class="music-details">
            <v-text class="music-name" :text="musicData.name" />
            <van-tag plain type="primary" size="medium">当前有{{toShortUnit(musicCommentTotal)}}条评论</van-tag>
          </div>
        </div>
      </template>
    </CommentList>
  </v-popup>
</template>

<script setup>
import CommentList from "../../components/list/CommentList.vue";
import {computed, defineProps, inject, onMounted, ref, watch} from "vue";
import {getMusicComments} from "../../api/api";
import Loading from "../../common/Loading";
import {useStore} from "vuex";
import {toShortUnit} from "../../common/util";

let propsDef = defineProps({
  provideName: {
    type: String
  },
  musicId: Number,
  musicData: Object
});
let musicId = computed(() => propsDef.musicId);
let musicCommentList = ref([]);
let commentListPage = ref(1);
let store = useStore();
let musicComments = computed(()=>store.state.music.musicCommentData?.comments);
let musicCommentTotal = computed(()=>store.state.music.musicCommentData?.total);
let musicHotComments = computed(()=>store.state.music.musicCommentData?.hotComments);

let commentCount = inject("music_comment_count", ref(0));
let hotComments = ref([]);

store.dispatch("music/getCommentData",1);

let show = inject("music_comment_count", ref(0));

watch(musicId, () => {
  store.dispatch("music/resetCommentData");
  getData();
});
function getData() {
  store.dispatch("music/nextCommentData").then((res)=>{
    console.log(res);
  });
}

</script>

<style lang="scss" scoped>
.music-info{
  display: flex;
  padding: 1rem;
  align-items: center;
  box-sizing: border-box;
  background: linear-gradient(45deg, #10b2ff, #a46dcd);
  .cover{
    width: 4rem;
    height: 4rem;
    margin: .5rem;
    padding: .2rem;
    background: white;
    border-radius: 50%;
  }
  .music-details{
    width: 10rem;
    margin: .5rem;
    .music-name{
      margin: .5rem 0;
      font-size: 14px;
      color: #fff;
    }
  }
}
</style>